<template>
<div id="list-two">
 <h2>框架排行（组建one）</h2>
 <ul>
 	<li v-for="item in newFrames">
		<span>{{item.name}}</span>
		<span class="star">热度:{{item.star}}</span>
	</li>
	
 </ul>
 </div>
</template>

<script>
import{mapState}from 'vuex'
export default {
  name: 'ListTow',
 computed:{
 	...mapState(['frames']),
 	newFrames(){
 		return this.$store.getters.changeFrames
 	}
 	
 }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
#list-two{
	background: #b7fcff;
	box-shadow: 1px 2px 3px rgba(0,0,0,0.2);
	margin-bottom: 30px;
	padding: 10px 20px;
}
#list-two ul{
	padding: 0;
	list-style-type: none;
	
}
#list-two li{
	margin-right: 10px;
	margin-bottom: 10px;
	background: rgba(255,255,255,0.7);
}
.star{
	font-weight: bold;
	color: #2618e8;
	display: block;
}
</style>
